<template>
    <div class="treeModel">
        <el-tree :data="treeModelMes.treeModelData" ref='mytree'  :props="treeModelMes.defaultProps"  node-key="id" :default-expanded-keys="defaultIds" @node-click="node=>{this.$emit('treeModelFn',node)}">
			<span class="treeModel-tree-node" slot-scope="{ node, data }"  :ref='`myspan`+data.id'>
                <span class="over-text" >{{ node.label }}</span><span class="over-text" v-if="data.total">({{ data.total }})</span>
                <span v-if="treeModelMes.operate" class="operate">
                    <i class="el-icon-plus" @click.stop="() => add(data)"></i>
                    <i class="el-icon-edit" @click.stop="() => edit(data)"></i>
                    <i class="el-icon-delete" @click.stop="() => remove(data)"></i>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
/* eslint-disable */  
export default {
    name:"treeModel",
    props:{
        treeModelMes:Object,
        defaultIds:Array,
    },
    data(){
        return {
            clickId:"",
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        add(data){
            this.$emit('addTree',data)
        },
        edit(data){
            this.$emit('editTree',data,'修改')
        },
        remove(data){
            this.$emit('removeTree',data)
        }
    },
    watch:{
        defaultIds(val){
            this.defaultIds = val
            this.$nextTick(()=>{
                this.$refs['myspan'+this.defaultIds[0]].click()
            })
        }
    }
}
</script>

<style lang='stylus' >
.treeModel
    background-color #fff
    padding-top 25px
    > span 
        width 100%
        height 56px
        background-color rgba(50, 150, 250, 1)
        text-align center
        border 1px solid rgba(255, 255, 255, 0)
        padding-left 20px
        display inline-block
        color #fff
        font-size 16px
        box-sizing border-box
        display flex
        align-items center
        font-size 14px
        >img
            width 15px
            height 15px
            margin-right 10px
        >i
            margin-right 10px
    .treeModel-tree-node
        width 100%
        font-size 14px
        display flex
        align-items center
        &:hover
            .operate
                display flex
        .operate
            margin 0 12px 0 0
            display none
            img,i 
                margin-left 10px
                width 14px
                height 14px
                color #3296FA 
            img:nth-of-type(1),i:nth-of-type(1)
                margin 0
</style>

<style lang="stylus">
.treeModel
    .el-tree-node__content
      .el-tree-node__expand-icon:before
         content:"+";
         font-size 12px
         font-weight bold
         color rgba(187, 187, 187, 1)
         width: 10px;
         height: 10px;
         border 1px solid rgba(187, 187, 187, 1)
         display block
         text-align center
         line-height 10px
      .treeModel-tree-node:before
         content:"";
         background url(../assets/images/smallIcon2.png) no-repeat
         background-size 80%
         width: 16px;
         height: 16px;
         border none
         background-position center
    .el-tree-node__children
      .el-tree-node__expand-icon:before
         content:"";
         background url(../assets/images/smallIcon1.png) no-repeat
         background-size 80%
         width: 12px;
         height: 12px;
         border none
      .treeModel-tree-node:before
         content: none
         background none
    .el-tree-node__expand-icon
        margin-left 9px
        font-size 14px
    .el-tree-node__expand-icon.expanded 
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
     .el-tree-node__expand-icon.expanded::before
       content:"-";
       font-size 12px
       font-weight bold
       color rgba(187, 187, 187, 1)
       width: 10px;
       height: 10px;
       border 1px solid rgba(187, 187, 187, 1)
       display block
       text-align center
       line-height 10px
    .is-current
        background-color #fff!important
        > .el-tree-node__content
            background-color: #fff!important
            color: rgba(49, 150, 250, 1);
    .el-tree-node__content
        height 38px
    .over-text
        max-width 100px
        word-break:normal; 
        width:auto; 
        display:inline-block; 
        white-space:pre-wrap;
        word-wrap : break-word ;
        overflow: hidden;
        line-height 20px
        font-size 12px
    .el-tree
        flex 1
</style>
